<template>
  <div class="org-area">
    <div class="table-action">
      <div class="left">
        <!-- <a-checkbox v-model:checked="includeSub"> 包含子部门 </a-checkbox> -->
      </div>
      <a-space :size="16">
        <a-button type="primary" @click="onClick('add')"> 添加成员 </a-button>
        <!-- <a-button type="primary" @click="onClick('start')"> 启用 </a-button>
        <a-button type="primary" @click="onClick('stop')"> 停用 </a-button> -->
        <a-button type="primary" @click="onClick('dimission')"> 离职 </a-button>
      </a-space>
    </div>
    <TableWrapper
      :columns="columns"
      @onOpenDrawer="onOpenDrawer"
      @onDimission="onDimission"
    />
    <OrgDrawer
      :visible="drawerVisible"
      :mode="mode"
      :curBizObject="curBizObject"
      @onClose="drawerVisible = false"
      @onRefresh="onRefresh"
    />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  ref,
  watchEffect,
  reactive,
  toRefs,
} from 'vue';
import { useStore } from 'vuex';
import { message, Modal } from 'ant-design-vue';
import { ResponseHandle } from '@/global/util/preUtils';
import { Columns } from '@/views/organization/constant';
import TableWrapper from '@/views/organization/components/orgArea/TableWrapper.vue';
import OrgDrawer from '@/views/organization/components/orgArea/OrgDrawer.vue';

export default defineComponent({
  name: 'OrgArea',
  components: {
    TableWrapper,
    OrgDrawer,
  },
  setup() {
    const store = useStore();
    const isLoading = computed(() => store.state.organization.isLoading);
    const selectedTreeKey = computed(
      () => store.state.organization.selectedTreeKey,
    );
    const includeSub = computed({
      get: () => store.state.organization.includeSub,
      set: (val) => store.commit('organization/SetIncludeSub', val),
    });
    const selectedRowKeys = computed(
      () => store.state.organization.selectedRowKeys,
    );
    const state = reactive({
      isAll: false,
      drawerVisible: false,
      curBizObject: {},
      columns: Columns,
      mode: 'add,',
    });

    const onRefresh = () => {
      store.dispatch('organization/getUserListByDept', {
        orgId: selectedTreeKey.value[0],
        setStore: true,
      });
    };
    const onClick = async (type: string) => {
      switch (type) {
        case 'add':
          state.drawerVisible = true;
          state.mode = 'add';
          break;
        case 'dimission':
          if (!selectedRowKeys.value.length) {
            message.warning('没有选中任何行');
          } else {
            Modal.confirm({
              title: '确定离职?',
              content: '确定离职选中的数据吗，请确认!',
              async onOk() {
                const res = await store.dispatch('organization/dimission', {
                  userids: selectedRowKeys.value,
                });
                ResponseHandle(res, () => {
                  onRefresh();
                });
              },
            });
          }
          break;
        default:
          break;
      }
    };
    const onOpenDrawer = (type: string, record: any) => {
      state.mode = type;
      state.curBizObject = record;
      state.drawerVisible = true;
    };
    const onDimission = (record: any) => {
      Modal.confirm({
        title: '确定离职?',
        content: '确定离职选中的数据吗，请确认!',
        async onOk() {
          const res = await store.dispatch('organization/dimission', {
            userids: [record.userid],
          });
          ResponseHandle(res, () => {
            onRefresh();
          });
        },
      });
    };

    return {
      isLoading,
      includeSub,
      ...toRefs(state),
      onClick,
      onRefresh,
      onOpenDrawer,
      onDimission,
    };
  },
});
</script>

<style lang="less" scoped>
.org-area {
  flex: 1;
  height: calc(100% - 48px);
  margin: 24px 32px;
  overflow-y: auto;
  transition: all 0.5s;
  background-color: @rb-body-background;
  .table-action {
    .flexRow();
    height: 84px;
    min-height: 84px;
    padding: 0 32px;
    .ant-space {
      height: 100%;
    }
  }
}
</style>
